   <%@ include file="/WEB-INF/jsp/common.jsp"%>

 

<script type="text/javascript" src="js/app/common.js"></script>
      
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/css/ui.multiselect.css" />
 
    <script src=     "js/jqgrid/grid.locale-en.js"  type="text/javascript"></script>
    <script src=    "js/jqgrid/jquery.jqGrid.min.js"   type="text/javascript"></script>
    <script src=    "js/jqgrid/grid.formedit.js"    type="text/javascript"></script> 
    <script src=   "js/jqgrid/jquery.jqGrid.src.js"    type="text/javascript"></script>
     

<title>Attendence</title>

<script   type="text/javascript">
var sectionID;

function enter()
{
	var rows= jQuery("#Requests").jqGrid('getRowData');
	  var paras=new Array();
	  for(var i=0;i<rows.length;i++){
	      var row=rows[i];
	      window.alert(row);
	      paras.push($.param(row));
	  }
	  $.ajax({
	      type: "POST",
	      url: "addEditTimeTable.htm",
	      data: paras.join('and'),
	      success: function(msg){
	          alert(msg);
	      }
	  });
}

var sendData = function(data) {

	
	var dataIds = $('#gridAttendance').jqGrid('getDataIDs');
	var attendenceID = $('#gridAttendance').jqGrid('getRowData', dataIds[0]); 
	attendenceID = attendenceID["attandenceID"]; 
	var absentIDs = "" ;
	for (var i = 0; i < 9; i++) { 
	var data = $('#gridAttendance').jqGrid('getRowData', dataIds[i]);
      if(data["PA1"] == "No")
    	  absentIDs = absentIDs +  "," + data["userid1"] ;
      if(data["PA2"] == "No")
    	  absentIDs = absentIDs +  "," + data["userid2"] ;
      if(data["PA3"] == "No")
    	  absentIDs = absentIDs +  "," + data["userid3"] ;
	} 
    $.ajax({
        type: "POST",
        url: "editAttandence.htm?attandenceValues=" + absentIDs + "&attendenceID=" + attendenceID + "&sectionID=" + sectionID,
        dataType:"json",
        data: absentIDs,
        contentType: "application/json; charset=utf-8",
        success: function(response, textStatus, jqXHR) {
            // display an success message if needed
            alert("success");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // display an error message in any way
            alert("error");
        }
    });
};
function enter()
{
    var localGridData = $("#gridAttendance").jqGrid('getGridParam','data');
    sendData(localGridData);
}

	 
function modifyList(){   
	 var ddl =  document.getElementById("selectSection");   
	 ddl.options.length = 0;
	 
	    $.post("getSections.htm", { standard: $('#selectStandard').val()}, function(data) {
	         var options = data.split(";");
			 var count = options.length;
	         for(var index =0 ; index < count ; index++)
	         { 
					var values = options[index].split(":");
					var text  = values[0];
					var value = values[1];
   			        var opt = document.createElement("option");
			        // Add an Option object to Drop Down/List Box
			        ddl.options.add(opt);
			        // Assign text and value to Option object
			        opt.text = text;
			        opt.value = value;
	         }
	    });
	}
function gradeSectionChanged(sel) {
	sectionID =sel.value;
	 $("#gridAttendance").setGridParam(
            { 
                url: 'getAttandence.htm?section='+sel.value
            }
            ).trigger("reloadGrid")
}

 $(document).ready(function() { 

	 	$( "#datepicker" ).datepicker( 
		 		{
			 		defaultDate: $("#datepicker").attr('rel') 
				 });

//		$("#datepicker").datepicker('setDate', new Date());

		
		var e = document.getElementById("selectSection") 
		var section = e.options[e.selectedIndex].value;
	var editOk = true;
     $("#gridAttendance").jqGrid({
    	 url : 'getAttandence.htm?section=' + section, 
         datatype: 'json',
         mtype: 'GET',
         caption: '',
         colNames: ['attandenceID','userid1', 'Student Name', 'P/A','userid2','Student Name','P/A','userid3','Student Name','P/A'],
         colModel: [
          { name: 'attandenceID', index: 'attandenceID',editable:true,width:15,  hidden: true, viewable: false },
          { name: 'userid1', index: 'userid',editable:true,width:15,  hidden: true, viewable: false },
          { name: 'firstName1', index: 'firstName1', width: 130, resizable: true, hidden: false, viewable: true,editable:false,editoptions:{size:20}, frozen : true },
          { name: 'PA1', index: 'PA1', searchoptions: { sopt: ['cn'] }, width: 20,  formatoptions: {disabled : false} ,   resizable: true, searchable: false ,editable:true,edittype:"checkbox",formatter:'checkbox'} , 

          { name: 'userid2', index: 'userid2',editable:true,width:15,  hidden: true, viewable: false },
          { name: 'firstName2', index: 'firstName2', width: 130, resizable: true, hidden: false, viewable: true,editable:false,editoptions:{size:20}, frozen : true },
          { name: 'PA2', index: 'PA2', searchoptions: { sopt: ['cn'] }, width: 20,  formatoptions: {disabled : false} ,   resizable: true, searchable: false ,editable:true,edittype:"checkbox",formatter:'checkbox'},  

          { name: 'userid3', index: 'userid3',editable:true,width:15,  hidden: true, viewable: false },
          { name: 'firstName3', index: 'firstName3', width: 130, resizable: true, hidden: false, viewable: true,editable:false,editoptions:{size:20}, frozen : true },
          { name: 'PA3', index: 'PA3', searchoptions: { sopt: ['cn'] }, width: 20,  formatoptions: {disabled : false} ,   resizable: true, searchable: false ,editable:true,edittype:"checkbox",formatter:'checkbox'}  
         
],

         loadtext: 'Loading..',
         
         pager: $("#pager"),
         rowNum: 10,
         rownumbers: true,
         rowList: [10, 20, 50],
         sortorder: 'asc',
         viewrecords: true,
         height: "100%",
         width: 780,
         scrollOffset:1,
         cellEdit: true,
         imgpath: '../scripts/jqgrid/themes/basic/images',
         editurl: 'server.php', 
         caption: "Time Table"
     });
  
     
     var addOptions = { reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
				  
			}};
     var deleteOptions = { reloadAfterSubmit:false, url : "deleteTimeTableRecord.htm",
    		 onclickSubmit : function(eparams) { 
					var allUserIDs = "";
    			    var selectedrows = jQuery("#gridAttendance").jqGrid('getGridParam', 'selarrrow'); 
    			    // we can use all the grid methods here
    			    //to obtain some data 
    			    for(var row in selectedrows)
    			    	{
    			        var userID = 	jQuery('#gridAttendance').jqGrid('getCell',selectedrows[row],'attandenceID');
    			        allUserIDs = allUserIDs + userID + ";" 
    			    	}
    			    eparams.url = eparams.url + "?attandenceID= " + allUserIDs; 
    			}};
     var editOptions = {reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
					 
 			}};
     
     jQuery("#gridAttendance").jqGrid('navGrid', '#pager', { add: false, view: false, del: false, edit: false },
    	     editOptions, // edit options
             addOptions , // add options
             deleteOptions, // del options
             {}, // search options
             {   // vew options
             beforeShowForm: function(form) {
              
             }
         });
   

 });

 function sectionChanged(sel) {
	 
	 $("#gridAttendance").setGridParam(
             { 
                     url: 'timeTableDetails.htm?section='+sel.value
             }
             ).trigger("reloadGrid")
 }
		  </script> 
 
	 </head>

	 <body class="body-content-class">



	 <div id="wrapper">
	 	<div id="banner">

	 <!-- include top common header links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/commonHeader.jsp"%>

	 <!-- include top navigation links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationTop.jsp"%>

	 	</div>
	 	<div id="content-wrapper">
	 		<div id="content">
	 		<div class="content-top">
	 		</div>
	 		<div class="content">


	 <div class="content-body">
	 	<table cellspacing="0" cellpadding="0" class="layout-grid">
	 		<tr>
	 			<td>
	 <table class="layout-grid" cellspacing="0" cellpadding="0">
	 	<tr>
	 		 <td class="left-nav">
	 		
	 <!-- include  content navigation left links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationContentLeft.jsp"%>
	 		
	 		</td>
	 		<td class="normal">
	 				<div id="demo-header">
	 							<h2>Attendence System</h2>
	 						</div>
	 						<div style="position: absolute; right: 27px" id="switcher"></div>
	 						<div id="demo-config">
	 							<div id="demo-frame-wrapper">
	 							<div id="demo-frame" style="height: 500px; width: 800px;">
	 							

	 <div class="demo-description" style="height: 300px">

<form id="Form" class='form-fields'> 
<input name='_detail' id='_detail' type='hidden' />
</form>
	<form action="createTeacher.htm" method="post" id="add-teacher-form-id" name="add-teacher-form" modelAttribute="user"  >
    Select Standard :
 <form:select path="gradeList" onchange="modifyList();" id="selectStandard" >
    <form:option value="0" label="--- Select ---"/>
    <form:options items="${gradeList}" itemValue="entityId" itemLabel="gradeName"/>
 </form:select> 
 Select Section:
  <form:select path="gradeList" onchange="gradeSectionChanged(this);" id="selectSection" >
    <form:option value="0" label="--- Select ---"/>
    <form:options items="${sectionList}" itemValue="entityId" itemLabel="sectionName"/>
 </form:select> 
  <br />
  
<p>Date: <input id="datepicker" type="text"></p>
 <br />
 

 
   <table id="gridAttendance"></table> 
    <div id="pager" ></div> 
    <input type="button" id="sendAll" onclick="enter()"  value="click" >  "
   
 
</form>
	 </div>
	 
	 								</div>									
	 							</div>
	 						</div>
	 					

	 <div class="UIAPIPlugin" id="widget-docs">
	   

	   <div id="options">
	     <h2 class="top-header">Options</h2>
	     <ul class="options-list">
	       



	     </ul>
	   </div>
	   
	   <div id="methods">
	     <h2 class="top-header">Methods</h2>
	     <ul class="methods-list">
	     </ul>
	   </div>
	   <div id="theming">
	   </div>
	 </div>
	 		</td>
	 	</tr>
	 </table>


	 			</td>
	 		</tr>
	 	</table>
	 </div>
	 		</div>
	 		</div>
	 	</div>
	 	<div id="footer">
	 	
	 	<!-- include  footer content links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/footer.jsp"%>
	 	
	 	</div>
	 </div>
	 </body>

	 </html>
   